<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>华为专区</title>
  <link rel="stylesheet" href="./index.css">
  <link rel="stylesheet" href="./base.css">
</head>
<body>
  <!-- logo -->
    <div class="logo-box wrapper">
      <div class="logo">
        <img src="./images/logo.huawei.png" alt="">
        <p>商城首页</p>
      </div>
      <div class="qrcode">
        <img src="./images/qrcode_vmall_app01.png" alt="">
        <p>微信扫码关注我们</p>
      </div>
    </div>

    <!-- 导航栏 -->
      <div class="nav-box">        
        <ul>
          <li><a href="#">华为专区</a></li>
          <li><a href="#">HUAWEIP10</a></li>
          <li><a href="#">HUAWEI Mate9</a></li>
          <li><a href="#">HUAWEI Nava</a></li>
          <li><a href="#">华为畅享65</a></li>
          <li><a href="#">荣耀专区</a></li>
        </ul>
      </div>

      <!-- 轮播图 -->
        <div class="banner">
          <img src="./images/2017042210305530.jpg" alt="">
      <!-- 圆点指示器 -->
        <ol>
          <li class="current"><i>1</i></li>
          <li><i>2</i></li>
          <li><i>3</i></li>
          <li><i>4</i></li>
          <li><i>5</i></li>
          <li><i>6</i></li>
          <li><i>7</i></li>
        </ol>

        </div>

      <!-- 侧边栏 -->
      <div class="container">
        <div class="category">
          <h2>全部商品</h2>
          <dl>
            <dt>手机</dt>
            <dd>HUAWEI Mate系列</dd>
          </dl>
          <dl>
            <dt>平板&穿戴</dt>
            <dd>平板电脑</dd>
            <dd>手环/手表</dd>
          </dl>
          <dl>
            <dt>笔记本电脑</dt>
          </dl>
          <dl>
            <dt>智能家居</dt>
            <dd>子母路由</dd>
            <dd>电力猫</dd>
            <dd>路由器</dd>
          </dl>
          <dl>
            <dt>专属配件</dt>
            <dd>贴膜</dd>
            <dd>保护壳</dd>
            <dd>保护套</dd>
          </dl>
          <dl>
            <dt>通用配件</dt>
            <dd>耳机</dd>
            <dd>音箱</dd>
          </dl>
        </div>
      </div>


      <!-- 图片区域 -->
        <div class="phoneImg wrapper"> 
          <img src="./images/20170310105644358.jpg" alt="">
          <img src="./images/2017031017165551.jpg" alt="">
          <img src="./images/20170310090516264.jpg" alt="">
          <img src="./images/20170313143419135.jpg" alt="">
        </div>


        <!-- 文字+图片 -->
        <div class="textImg wrapper">
          <div class="phone-ad">
            <div class="phone-text">
              <div class="phone-name">HUAWEI P10 Plus</div>
              <div class="phone-material">金鹰钻雕工艺</div>
              <div class="phone-price">￥4388</div>
            </div>
            <img src="./images/1484219138436.png" alt="HUAWEI P10 Plus">
          </div>
          <div class="phone-ad">
            <div class="phone-text">
              <div class="phone-name">HUAWEI nova 青春版</div>
              <div class="phone-material">炫出我色彩</div>
              <div class="phone-price">￥1999</div>
            </div>
            <img src="./images/1489161234073.png" alt="HUAWEI nova 青春版">
          </div>
          <div class="phone-ad">
            <div class="phone-text">
              <div class="phone-name">HUAWEI Mate 9 Pro</div>
              <div class="phone-material">2K双曲面屏</div>
              <div class="phone-price">￥4699</div>
            </div>
            <img src="./images/1491476650727.png" alt="HUAWEI Mate 9 Pro">
          </div>
        </div>

        <!-- 保障 -->
          <div class="guarantee wrapper">
            <div class="guarantee-text">
              <h5></h5>
              <p>500强企业 品质保证</p>
            </div>

            <div class="guarantee-text">
              <h5></h5>
              <p>7天退货 15天换货</p>
            </div>

            <div class="guarantee-text">
              <h5></h5>
              <p>99元起免运费</p>
            </div>

            <div class="guarantee-text">
              <h5></h5>
              <p>448家维修网点 全国联保</p>
            </div>
          </div>
          
          <!-- 底部介绍 -->
          <footer>
            <div class="footer-nav">
              <div class="nav-section">
                <h3>帮助中心</h3>
                <ul>
                  <li><a href="#">购物指南</a></li>
                  <li><a href="#">配送方式</a></li>
                  <li><a href="#">支付方式</a></li>
                  <li><a href="#">常见问题</a></li>
                </ul>
              </div>
              <div class="nav-section">
                <h3>售后服务</h3>
                <ul>
                  <li><a href="#">保修政策</a></li>
                  <li><a href="#">退换货政策</a></li>
                  <li><a href="#">退换货流程</a></li>
                  <li><a href="#">保修状态查询</a></li>
                </ul>
              </div>
              <div class="nav-section">
                <h3>技术支持</h3>
                <ul>
                  <li><a href="#">售后网点</a></li>
                  <li><a href="#">荣耀零售店铺</a></li>
                  <li><a href="#">预约维修</a></li>
                  <li><a href="#">手机寄修服务</a></li>
                  <li><a href="#">维修配件价格查询</a></li>
                  <li><a href="#">软件下载</a></li>
                </ul>
              </div>
              <div class="nav-section">
                <h3>关于商城</h3>
                <ul>
                  <li><a href="#">公司介绍</a></li>
                  <li><a href="#">华为商城简介</a></li>
                  <li><a href="#">联系客服</a></li>
                </ul>
              </div>
              <div class="nav-section">
                <h3>关注我们</h3>
                <ul>
                  <li><a href="#">新浪微博</a></li>
                  <li><a href="#">腾讯微博</a></li>
                  <li><a href="#">花粉俱乐部</a></li>
                  <li><a href="#">商城手机版</a></li>
                </ul>
              </div>
            </div>
          </footer>

          <!-- 网站底部布局 -->
          <div class="footer-links wrapper">
            友情链接: 荣耀官网|华为消费者业务|荣耀官网|华为官网|荣耀官网|华为消费者业务|荣耀官网 | 花粉俱乐部| 莫塞尔商城 | 爱旅官网 | 华为应用市场 | 万表网 | 中商情报网 | 刷机精灵 | 华为手机 | 优购物官网 | 智能电视 | UC浏览器 |
            中关村商城 | 酷狗音乐 | 华为商城手机版 | 百信手机网 | 卡宝宝网 | 多特软件下载 | 同步助手 | 蜂鸟摄影网 | 奇珀论坛 | 家具商城 | 拍鞋网商城 | 欧宝丽珠宝 | 寻购网 | 亿智蘑菇 | 安卓市场 |
            阿里巴巴生意经 | 手机大全 | 安卓软件园 | 卓大师刷机 | 智机论坛 | 电子产品世界 | 历趣网 | 网购返利 | Apple110 | 91手机门户网 | 移动叔叔 | 奥特莱斯 | 荣耀Magic | 携程租车 | <a href="#">申请链接></a>
          </div>
          <div class="footer-info wrapper">
            <div class="footer-info-left">
              <img src="./images/20160226162651249.png" alt="">
              <p>隐私政策 服务协议 Copyright © 2012 - 2017 VMALL.COM 版权所有 保留一切权利</p>
            </div>
            <p> 苏公网安备 32011402010009号 | 苏ICP备09062682号-9 | 增值电信业务经营许可证：苏B2-20130048 网络文化经营许可证 ：苏网文[2015] 1599-026号</p>
          </div>


          <!-- 底层商标图片 -->
            <div class="footer-bottom wrapper">
              <img src="./images/20160226162415360.png" alt="">
              <img src="./images/20160226162521265.png" alt="">
              <img src="./images/20160226162531395.png" alt="">
              <img src="./images/20161224180914742.jpg" alt="">
            </div>
    

</body>
</html>